<template>
  <div>
    <Head1 />
    <div class="content">
      <div class="box">
        <div class="cont_body">
          <div class="bd_top">
            <div class="top_tx">
              <div>
                <img src="@/assets/mypageimg/b.jpg" alt="" />
                <div>
                  <p>Darrell Gill</p>
                  <span> 10-20 </span>
                </div>
              </div>
              <div>
                <span class="el-icon-plus">关注</span>
              </div>
            </div>
            <div class="top_txt">
              <p>
                稻城亚丁风景区位于四川省甘孜藏族自治州稻城县香格里拉镇亚丁村境内,主要由"仙乃日、央迈勇、夏诺多吉"三座神山和周围的河流、湖泊和高山草甸组成
              </p>
            </div>
            <div class="top_img">
              <div>
                <img src="@/assets/mypageimg/b.jpg" alt="" />
                <img src="@/assets/mypageimg/b.jpg" alt="" />
                <img src="@/assets/mypageimg/b.jpg" alt="" />
              </div>
            </div>
          </div>
          <div class="bd_bom">
            <div class="bom_top">
              <p>110次浏览</p>
              <div>
                <span class="el-icon-check">562</span>
                <span class="el-icon-star-off">1234</span>
              </div>
            </div>
            <div class="bom_pl">
              <div>
                <div class="pl_tx">
                  <img src="@/assets/mypageimg/a.jpeg" alt="" /><span
                    >Gally:</span
                  >
                </div>
                <div class="pl_txt">
                  <p>这个地方很好玩啊!</p>
                  <div>
                    <span class="el-icon-check">562</span>
                    <span class="el-icon-star-off">1234</span>
                  </div>
                </div>
              </div>
              <div>
                <div class="pl_tx">
                  <img src="@/assets/mypageimg/a.jpeg" alt="" /><span
                    >Gally:</span
                  >
                </div>
                <div class="pl_txt">
                  <p>这个地方很好玩啊!</p>
                  <div>
                    <span class="el-icon-check">562</span>
                    <span class="el-icon-star-off">1234</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="cont_body">
          <div class="bd_top">
            <div class="top_tx">
              <div>
                <img src="@/assets/mypageimg/b.jpg" alt="" />
                <div>
                  <p>Darrell Gill</p>
                  <span> 10-20 </span>
                </div>
              </div>
              <div>
                <span class="el-icon-plus">关注</span>
              </div>
            </div>
            <div class="top_txt">
              <p>成都</p>
            </div>
            <div class="top_img">
              <div>
                <img src="@/assets/mypageimg/b.jpg" alt="" />
                <img src="@/assets/mypageimg/a.jpeg" alt="" />
                <img src="@/assets/mypageimg/b.jpg" alt="" />
              </div>
            </div>
          </div>
          <div class="bd_bom">
            <div class="bom_top">
              <p>110次浏览</p>
              <div>
                <span class="el-icon-check">562</span>
                <span class="el-icon-star-off">1234</span>
              </div>
            </div>
            <div class="bom_pl">
              <div>
                <div class="pl_tx">
                  <img src="@/assets/mypageimg/b.jpg" alt="" /><span
                    >Gally:</span
                  >
                </div>
                <div class="pl_txt">
                  <p>哈哈哈哈哈!</p>
                  <div>
                    <span class="el-icon-check">562</span>
                    <span class="el-icon-star-off">1234</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Foot num="5" />
  </div>
</template>
<script>
import Head1 from "../../components/My_body/Mypage.vue";
import Foot from "../../components/Foot.vue";
export default {
  name: "mypinglun",
  components: {
    Head1,
    Foot,
  },
};
</script>
<style scoped lang="scss">
.content {
  padding: 10px;
  margin-top: 3px;
  height: 520px;
  background-color: #f3f3f3;
  overflow: scroll;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  > .box {
    height: 250%;
    > .cont_body {
      padding: 5px;
      box-shadow: 0px 1px 5px 1px rgba(77, 39, 39, 0.253);
      margin-top: 5px;
      margin-bottom: 15px;
      background-color: rgba(255, 255, 255, 0.747);
      border-radius: 5px;

      > .bd_top {
        width: 100%;
        > .top_tx {
          display: flex;
          align-items: center;
          justify-content: space-between;
          > div:nth-of-type(1) {
            display: flex;
            align-items: center;
            > img {
              width: 40px;
              height: 40px;
              border-radius: 50%;
              margin-right: 10px;
            }
            > div {
              > p {
                font-weight: bold;
              }
              > span {
                font-size: 13px;
                color: gray;
              }
            }
          }
          > div:nth-of-type(2) {
            width: 50px;
            border: 1px solid #6aa0cf;
            border-radius: 15px;
            text-align: center;
            cursor: pointer;
            > span {
              text-align: center;
              font-size: 12px;
              color: #6aa0cf;
              line-height: 20px;
            }
          }
        }
        > .top_txt {
          > p {
            margin-top: 8px;
            opacity: 0.7;
          }
        }
        > .top_img {
          width: 100%;
          overflow-x: scroll;
          margin-top: 5px;
          > div {
            width: 120%;
            display: flex;
            justify-content: space-evenly;
            align-items: center;
            > img {
              width: 150px;
              height: 120px;
              margin-right: 15px;
            }
          }
        }
      }
      > .bd_bom {
        margin-top: 8px;
        > .bom_top {
          display: flex;
          justify-content: space-between;
          border-bottom: 1px solid rgba(128, 128, 128, 0.527);
          > p {
            color: gray;
          }
          > div {
            > span {
              color: gray;
              margin-left: 10px;
              font-size: 16px;
              cursor: pointer;
            }
          }
        }
        > .bom_pl {
          margin-top: 12px;
          > div {
            > .pl_tx {
              display: flex;
              align-items: center;
              > img {
                width: 30px;
                height: 30px;
                border-radius: 50%;
                margin-right: 10px;
              }
              > span {
                color: gray;
              }
            }
            > .pl_txt {
              margin-left: 35px;
              display: flex;
              justify-content: space-between;
              align-items: center;
              > p {
                opacity: 0.6;
                font-size: 14px;
              }
              > div {
                > span {
                  cursor: pointer;
                  margin-left: 5px;
                  color: gray;
                  font-size: 13px;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
